import React from 'react';
import { observer } from "mobx-react-lite";

import Earth3dVis, { type Earth3dVisProps } from "@/components/app/earth3dVis";
// import {onMapDidMount} from "./Demo";
import ShowCaseMenu from "./ShowCase";
import { Mouse, BaseLayerChange } from "./widgets";

const cameraMinZoomDistance = 1;    // 相机最小缩放距离
// const cameraMinZoomDistance = 1340;    // 相机最小缩放距离
const cameraMaxZoomDistance = 13482039; // 相机最大缩放距离

// 基础图层列表
const baseLayers: Earth3dVisProps["baseLayers"] = [
    {
        label: "高德卫星图",
        groupLayer: [
            {
                amap:{
                    style:'img',     // 卫星图
                    crs:"WGS84",
                    maximumLevel: 16,
                }
            },
            {
                amap:{
                    style:'cva',        // 路网图
                    crs:"WGS84",
                    maximumLevel: 18,
                }
            },
        ]
    },

    {
        label: "ArcGis卫星图",
        groupLayer: [
            {
                arcGIS:{style:'img',}
            },
        ]
    },
    {
        label: "ArcGis电子图",
        groupLayer: [
            {
                arcGIS:{style:'shaded_relief',}
            },
        ]
    },
    {
        label: "ArcGis地形图(terrain)",
        groupLayer: [
            {
                arcGIS:{style:'terrain',}
            },
        ]
    },
    {
        label: "ArcGis地形图(physical)",
        groupLayer: [
            {
                arcGIS:{style:'physical',}
            },
        ]
    },
];

const cameraFlyToPosition: Earth3dVisProps["cameraFlyToPosition"] = {
    lng: 106.35,
    lat: 34.21,
    // alt: 6800000,
    // alt: 20000000,
    alt: cameraMaxZoomDistance,    // 视高度, 单位米
    heading: 0,      // 相机的朝向
    pitch: -90,      // 相机的俯仰角
    roll: -5,        // 相机的滚转角
    duration: 3,     // 动画持续时间, 单位是秒
};

const lookAtPosition: Earth3dVisProps["lookAtPosition"] = {
    center:{
        lng: 106.35,
        lat: 34.21,
    },
    heading: 0,      // 相机的朝向
    pitch: -90,      // 相机的俯仰角
    range: 6800000.0,        // 相机的滚转角
};

const Cesium3D: React.FC = () => {
    // const { gisMapStore,onMounted } = useCesium3D();

    return <Earth3dVis
        baseLayers={baseLayers}
        onMapDidMount={onMapDidMount}
        cameraFlyToPosition={cameraFlyToPosition}
    >
        <Mouse />
        <BaseLayerChange />
        <ShowCaseMenu />
    </Earth3dVis>
}

export default observer(Cesium3D);


const onMapDidMount:Earth3dVisProps["onMapDidMount"] = ({cesiumUtil}) => {
    const { CE, viewer} = cesiumUtil;

    // 设置viewer相关参数
    viewer.setOptions({
        enableFxaa: true,   // 抗锯齿
        cameraController:{
            minimumZoomDistance: cameraMinZoomDistance,
            maximumZoomDistance: cameraMaxZoomDistance,
        }
    });


    // 罗盘
    viewer.compass.enable = true;

    // 放大缩小
    viewer.zoomController.enable = true;

    // 比例尺
    viewer.distanceLegend.enable = true;

    // 位置信息
    viewer.locationBar.enable = true;

    // 蒙层
    // viewer.loadingMask.enable = true;

    // 鹰眼地图
    // viewer.hawkeyeMap.enable = true;
}